<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // JSONP


        // CORS: 后端加一个: Access-Control-Allow-Origin


        // Proxy
        // vue.config.js文件夹里面
        module.exports = {
            devServer: {
                host: '127.0.0.1',
                port: 8084,
                open: true,// vue项⽬启动时⾃动打开浏览器
                proxy: {
                    '/api': { // '/api'是代理标识，⽤于告诉node，url前⾯是/api的就是使⽤
                        // 代理的
                        target: "http://xxx.xxx.xx.xx:8080", //⽬标地址，⼀般是指后台
                        // 服务器地址
                        changeOrigin: true, //是否跨域
                        pathRewrite: { // pathRewrite 的作⽤是把实际Request Url中的'/
                            // api'⽤""代替
                            '^/api': ""
                        }
                    }
                }
            }
        }

        /*
        代理:原理
        在开发阶段，利用 webpack-dev-server (一个 Node.js 服务器) 作为中间人，拦截前端发往特定路径的请求，然后由服务器端代为转发给真正的后端 API，并将结果返回给前端。
        由于服务器端转发不受浏览器同源策略限制，从而巧妙地解决了开发时的跨域问题。
        
        */ 
    </script>
</body>
</html>